<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>今日头条-首页</title>
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.js"></script>
<link rel="stylesheet" href="/resource/css/bootstrap.css">
<link rel="stylesheet" href="/resource/css/index.css">
<style type="text/css">

a:visited {
 color: #000000;
 text-decoration: none;
}

</style>
</head>
<body>
	
	<div class="container">
		<!-- 上方展示区 -->
		
		<div>
			<!-- 图片 -->
			<a href="/"> <img alt="" src="/resource/pic/logo-admin.jpg" height="50" width="100" ></a> 
			
			<div class="float-right align-items-center" >
			<br>
				<!-- 右侧的个人中心和退出按钮 -->
				<!-- 如果已经登录，则显示个人中心和退出 -->
					<c:if test="${LOGIN_USER!=null }">
						你好，<b>${LOGIN_USER.nickname }</b>
						<input class="btn btn-primary btn-sm" type="button" onclick="toCenter()" value="${LOGIN_USER.role==0?'个人中心':'管理员中心' }">
						<input class="btn btn-primary btn-sm" type="button" onclick="logout()" value="退出">
					</c:if>
					
					<!-- 如果没有登录，则显示登录和注册按钮 -->
					<c:if test="${LOGIN_USER==null }">
						<input class="btn btn-primary btn-sm" type="button" onclick="toLogin()" value="登录">
						<input class="btn btn-primary btn-sm" type="button" onclick="toReg()" value="注册">
					</c:if>
			</div><br>
		<hr>
		</div>
		
		<!-- 下方展示区 -->
		<div class="row">
			<!-- 左侧导航 -->
			<div class="col-md-2 channel">
				<ul>
					<!-- 栏目导航 -->
					<!-- 热点 -->
					<li><a href="/" class="channel-item ${article.channelId==null?'active':'' }">热点</a></li>
						  	
					<!-- 栏目数据 -->
					<c:forEach items="${channels }" var="channel">
						  <li><a href="/?channelId=${channel.id }" 
						  	class="channel-item ${article.channelId==channel.id?'active':'' }">${channel.name }</a></li>
					</c:forEach>
				</ul>
			</div>
			
			<!-- 中间页面展示 -->
			<div class="col-md-7">
				<!-- 栏目频道数据展示 -->
				<c:if test="${article.channelId != null }">
					
					<div class="subchannel row">
						<ul>
							<!-- 展示全部数据 -->
							<a href="/?channelId=${article.channelId }" class="sub-item ${article.categoryId==null?'sub-selected':'' }">全部</a>
								
							<!-- 所有类别数据的展示 -->
							<c:forEach items="${categories }" var="category">
								<a href="/?channelId=${article.channelId }&categoryId=${category.id}" 
								class="sub-item ${article.categoryId==category.id?'sub-selected':'' }">${category.name }</a>
							</c:forEach>
						</ul>
					</div>
				
				</c:if>
				
				<!-- 热点数据展示 -->
				<!-- 轮播图 -->
				<c:if test="${article.channelId == null }">
					<div>
						<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
						  <ol class="carousel-indicators">
						  
						  	<!-- 用于计算轮播图的个数 -->
						  	<c:forEach items="${slides }" var="slide" varStatus="i">
						    	<li data-target="#carouselExampleCaptions" data-slide-to="${i.index }"  class="${i.index==0?'active':'' }"></li>
						    </c:forEach>
	
						  </ol>
						  <div class="carousel-inner">
						  
						  	<!-- 用于展示轮播图图片 -->
						  	<c:forEach items="${slides }" var="slide" varStatus="i">
						  	
							    <div class="carousel-item ${i.index==0?'active':'' }">
							      <img src="${slide.picture }" class="d-block w-100" alt="..." width="600" height="400">
							      <div class="carousel-caption d-none d-md-block">
							        <h5>${slide.title }</h5>
							      </div>
							    </div>
							    
						 	</c:forEach>
						 	
						  </div>
						  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
						    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
						    <span class="sr-only">上一个</span>
						  </a>
						  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
						    <span class="carousel-control-next-icon" aria-hidden="true"></span>
						    <span class="sr-only">下一个</span>
						  </a>
						</div>
					</div>
				</c:if>
				<hr>
				
				<!-- 文章数据 -->
				<div>
					<c:forEach items="${info.list }" var="article">
						
							<!-- 将图片和文字写到一行 -->
							<div class="row">
								<!-- 文章标题图片展示 -->
								<div class="col-md-2">
									<!-- 文章详情的链接 -->
									<a href="detail?articleId=${article.id }">
										<img alt="" src="${article.picture }" width="100" height="100">
									</a>
								</div>
								
								<!-- 文章标题和信息的展示 -->
								<div class="col-md-10">
									<!-- 文章详情的链接 -->
									<a href="detail?articleId=${article.id }">
										<div class="title-box"> ${article.title }</div> <br>
										${article.userName }·${article.hits }点击·${article.displayTime }
									</a>
								</div>
							</div>
						<hr>
					</c:forEach>
				</div>
				
				<jsp:include page="/WEB-INF/view/common/pages.jsp"></jsp:include>
			</div>
			
			<!-- 右侧展示区 -->
			<div class="col-md-3">
				<!-- 24小时热文 -->
				<div class="card" style="width: 18rem;">
				  <div class="card-header title-box">24小时热文</div>
				  
				  <ul class="list-group list-group-flush">
				  	<c:forEach items="${info24Hot.list }" var="article">
				    	<li class="list-group-item">
				    		<a href="detail?articleId=${article.id }">${article.title }</a>
				    	</li>
				    </c:forEach>
				    
				    <li><br></li>
				  </ul>
				  
				</div>
				
				<!-- 点击量排行榜 -->
				<div class="card" style="width: 18rem;">
				  <div class="card-header title-box">点击量排行榜</div>
				  
				  <ul class="list-group list-group-flush">
					  	<c:forEach items="${infoHits.list }" var="article">
					    	<li class="list-group-item">
								<a href="detail?articleId=${article.id }">${article.title }</a>
							</li>
				   		</c:forEach>
				  </ul>
				</div>
			</div>
		</div>
		
		<!-- 友情链接 -->
		<hr>
		<div class="text-center">
			友情链接：
			<c:forEach items="${links }" var="l">
				<a href="${l.url }">${l.text }</a>
			</c:forEach>
		</div>
		<br>
		
	</div>
	
</body>
<script type="text/javascript">
	
	//分页
	function goPage(pageNum){
		//获取栏目频道和分类的id
		var channelId = '${article.channelId}';
		var categoryId= '${article.categoryId}';
		
		//分页参数
		var url="/?pageNum="+pageNum;
		
		//拼装栏目频道和分类的数据
		if(channelId != null && channelId != ""){
			url += "&channelId=" + channelId;
			
			if(categoryId != null && categoryId != ""){
				url += "&categoryId=" + categoryId;
			}
		}
		
		//跳转
		location=url;
	}
	//跳转到登录页面
	function toLogin(){
		location="/user/toLogin";
	}
	//跳转到注册页面
	function toReg(){
		location="/user/toRegister";
	}
	//注销
	function logout(){
		location="/user/logout";
	}
	//跳转到个人中心
	function toCenter(){
		var role = "${LOGIN_USER.role}";
		
		//如果为0 则跳转到个人中心，如果为1，则跳转到管理员中心，否则跳转到首页
		if(role != null && role == 0){
			location="/my/";
		}else if(role !=null && role==1){
			location="/admin/";
		}else{
			location="/";
		}
	}
</script>
</html>
